<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img {
        width: 200px;
        height: 100px;
        display: block;
      }
    </style>
  </head>
  <body>
    <button id="btn">切换图片</button>
    <img src="./images/bg1.jpg" data-src="images/bg2.jpg" alt="图片" />
    <img data-src="images/bg2.jpg" alt="图片" />
    <!-- data-用户自定义属性 -->
    <script>
      //Ⅰ）获取属性值
      //DOM节点.属性名    //不能获取用户自定义的属性
      var img = document.getElementsByTagName("img");//获取到一个数组
      console.log(img[0].src);
      //console.log(img[0].data-src); 错误  不能获取用户自定义属性
      console.log(img[0].alt);
      //DOM节点.getAtteibute(属性名)   //获取所有属性包括用户自定义的属性值。
      console.log(img[0].getAttribute("src"));
      console.log(img[0].getAttribute("alt"));
      console.log(img[0].getAttribute("data-src"));

      //Ⅱ）设置属性值
      //DOM节点.属性值 = 属性值  //不能设置用户自定义属性的值
      img[1].src = "images/bg1.jpg";
      var sign = 0; //设置一个标示
      var url = img[0].getAttribute("data-src"); //获取图片属性值 用来切换图片用
      var src = img[0].getAttribute("src");
      //DOM节点.setAtteibute（属性名，属性值） //设置所有属性值。
      document.getElementById("btn").onclick = function () {
        //alert(); //onclick单击
        if (sign == 0) {
          img[0].setAttribute("src", url);
          sign = 1;
        } else {
          img[0].setAttribute("src", src);
          sign = 0;
        }
      };

      //Ⅲ）删除属性值
      //DOM节点.属性名=''；  //不能删除用户自定义的属性。
      //img[1].src = "";
      //DOM节点.removeAttribute(属性名)  //删除所有属性。
      img[1].removeAttribute("src");
    </script>
  </body>
</html>
